<template>
  <view class="out">
    <input type="text" v-model="iptValue" @focus="isActive=true" @blur="isActive=false" @confirm="onConfirm">
    <image src="../../static/chicken.gif" class="pic" :class="{active:isActive}"></image>
  </view>
  <view>预览：{{iptValue}}</view>
</template>

<script setup>
  import { ref } from 'vue'
  const iptValue = ref('')
  const isActive = ref(false)

  function onConfirm(evt) {
    console.log(evt)
  }
</script>

<style lang="scss">
  .out {
    padding: 0 20px;
    margin-top: 40px;
    position: relative;

    input {
      border: 1px solid #ccc;
      height: 40px;
      position: relative;
      z-index: 2;
      background-color: #fff;
      padding: 0 10px;
    }

    .pic {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 0;
      left: calc(50% - 12px);
      z-index: 1;
      transition: top 0.3s;
    }

    .pic.active {
      top: -24px;
    }
  }
</style>